<template>
  <div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>借书日期</th>
            <th>借书天数</th>
            <th>是否归还</th>
            <th>图书类型</th>
            <th>借书名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.startTime}}</td>
            <td>{{item.useday}}</td>
            <td>{{item.isBack}}</td>
            <td>{{item.bookType}}</td>
            <td>{{item.booksName | formatBooks}}</td>
            <td>
              <button @click="updateUser(item)">修改</button>
              <button>删除</button>
              <button>查看</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <Pagination></Pagination>
      </div>
  </div>
</template>


<script>
import {mapState, mapActions} from 'vuex'
import Pagination from '../../components/pagination/Pagination.vue'
export default {
    data(){
      return {

      }
    },
    computed: {
        ...mapState({
          list: state => state.user.list
        })
    },
    methods: {
        ...mapActions([
          'getUserData'
        ]),
        getData(){
          this.getUserData();
        },
        updateUser(item){
          this.$router.push({name: 'Update', params: {item}})
        }
    },
    components: {
      Pagination
    },
    mounted () {
      this.getData();
    },
    filters: {
      formatBooks(val){
        let arr = JSON.parse(val);
        arr = arr.map(val=>{
          return val.bookName
        });
        return arr.join('-')
      }
    }
}
</script>
